<template>
	<view>
		<view class="common" style="height: 240rpx;">
			<!-- <image src="@/static/money_course/logo.webp" mode=""></image> -->
			<img class="card_img" src="@/static/money_course/logo.webp">
		</view>
		<!-- 今日推荐 -->
		<text style="margin: 5% 5%;font-weight: bold;" @click="goTry">今日推荐课程</text>
		  <view class="flex-container">
		    <view class="scroll-item">Item 1</view>
		    <view class="scroll-item">Item 2</view>
		    <view class="scroll-item">Item 3</view>
		    <view class="scroll-item">Item 4</view>
		    <view class="scroll-item">Item 5</view>
		  </view>
		  <!-- 全部课程 -->
		  <text style="margin: 5% 5%;font-weight: bold;" @click="goTry">全部课程</text>
		  <view>
			  <view style="display: flex; margin: 5% 2.5%; width: 95%;height: 240rpx;" v-for="index in 3" :key="index">
				  <view style="width: 45%;height: 100%;background-color:burlywood"></view>
				  <view style="width: 50%;height: 100%;margin-left: 5%;">
					  <view style="height: 50%;width: 100%;">隐藏在财务报表中的税务风险--其他应收其他...</view>
					  <view style="height: 25%;width: 100%;">张清玲<text style="margin-left: 2%;">财务官</text></view>
					  <view style="height: 25%;width: 100%;">观看次数：34次</view>
				  </view>
			  </view>
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			goTry(){
				uni.navigateTo({
				  url: '/pages/try/try'
				});
			}
		}
	}
</script>

<style lang="scss">
	// 公共样式
	.common{
		margin: 5% auto;
		width: 700rpx;
	}
	
	// logo
	.card_img{
		height: 100%;
		width: 100%;
		border-radius: 20rpx 20rpx;
	}
	// 推荐课程
	.flex-container {
		margin: 5% auto;
	  display: flex;
	  overflow-x: scroll;
	  width: 90%;
	  height: 300rpx;
	}
	.scroll-item {
	  flex: 0 0 auto; /* 不进行扩展或收缩 */
	  width: 300rpx;
	  height: 70%;
	  margin-right: 10px;
	  background-color: gray;
	  border-radius: 20rpx 20rpx;
	}
</style>
